<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品对比搜索</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
	 
                body {
                -webkit-tap-highlight-color: rgba(255,0,0,0);
                font-size: 0.14rem;
                padding: 0;
                margin: 0;
                font-family: \5FAE\8F6F\96C5\9ED1;
                background: #fff;
                color: #333;
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden;
                opacity: 0;
                }

                html,body {
                background-color: #ebebeb;
                width: 100%;
                height: 100%;
                }

                div, input, button, textarea, span, small, big, p, applet, object, iframe, h1, h2, h3, h4, h5, h6, a, em, font, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, caption, tbody, tfoot, thead, tr, th, td, section, article, header, footer, aside, nav {
                padding: 0;
                margin: 0;
                list-style: none
                }

                section, article, header, footer, aside, nav {
                padding: 0;
                margin: 0;
                display: block
                }

                input, select, button, textarea {
                outline: none;
                border: none;
                font-size: 12px;
                font-family: \5FAE\8F6F\96C5\9ED1
                }

                input[type="button"], input[type="submit"], input[type="reset"], button {
                -webkit-appearance: none;
                cursor: pointer
                }

                img {
                border: none
                }

                a {
                color: #333;
                text-decoration: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                }

                a:hover {
                text-decoration: none
                }
                .left {
                float: left;
                }

                .right {
                float: right;
                }

                .title {
                z-index: 999;
                text-align: center;
                 background: linear-gradient(to right, #FA4965 , #F64D93);
                width: 100%;
                height: 0.88rem;
                }

                .titleImg {
                display: inline-block;
                margin: 0.25rem 0.15rem 0.15rem 0.2rem;
                width: 0.18rem;
                height: 0.3rem;
                }

                .titleImg  img {
                width: 100%;
                height: 100%;
                }

                .titleSearch {
                font-size: 0.25rem;
                display: inline-block;
                margin: 0.25rem 0.2rem;
                color: #fff;
                }

                .search {
                display: inline-block;
                padding-left: 0.7rem;
                 background-color: #C73D61;
                border-radius: 30px;
                margin: 0.19rem 0 0.19rem 0;
               width: 4.0rem;
               height: 0.5rem;
               color: #fff;
	           font-size:18px;
                }

                .spanPos {
                display: inline-block;
                position: relative;
                }

                .spanPos .img1 {
                right: 0.2rem;
                top: 0.3rem;
                position: absolute;
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                }
				 .spanPos .img2 {
                left: 0.2rem;
                top: 0.3rem;
                position: absolute;
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                }
     .searchList {
		margin-bottom:10px;
    }
              .valueList {
      background-color: #fff;
      width:100%;
	  min-height:86px;
    }
                .dataList {
                width: 5rem;
                height: 1rem;
                }

           .addImg {
		margin-top:35px;
		margin-right:16px;
    }

    .addImg img{
      display:inline-block;
      width: 16px;
      height: 16px;
    }

           .listTitle {
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      width: 4.6rem;
	  
	  font-size:16px;
	  color:#4a4a4a;
	  height:16px;
	  line-height:16px;
	  margin:15px 89px 6px 16px;
    }

         .disFixed {
      display: flex;
      width: 4.6rem;
      justify-content: space-between;
	  height:14px;
	  line-height:14px;
	  margin:10px 0 15px 16px;
    }

              .disFixed li,span {
	
      font-size: 14px;
	  color:#4a4a4a;

    }
    .xintuo{
		
		font-size:12px;
		color:#9b9b9b;
		height:12px;
		line-height:12px;
		margin-left:16px;
		}
    .disFixed span {
	 
      margin-left: 0.1rem;
      color: #EB5256;
    }
       .disFixed span.disFixed_unit{
        margin-left: 0rem;
  }
                .addImg span {
                font-size: 0.18rem;
                display: block;
				}
                .disPlay  {
                display: none;
                }
     ::-webkit-input-placeholder {
	
	color: #fff;
	font-size:18px;
}
    :-ms-input-placeholder {
	
	color: #fff;
	font-size:18px;
}
    :-moz-placeholder {
	
	color: #fff;
	font-size:18px;
}
    ::-moz-placeholder {
	
	color: #fff;
	font-size:18px;
}
























    </style>
    <script type="text/javascript">
          function gotoActivity (activity) {
            nativeMethod.toActivity(activity);
          }
























    </script>
</head>
<body>
<div id="app">
    <div class="title">
        <a href="index.html"><span class="titleImg left">
            <img src="img/5507782749902876.png" alt="">
        </span></a>
        <span class="spanPos">
                        <input v-model="inputValue" type="text" class="search" placeholder="搜索产品"/>
                        <img class="img1" src="img/892031081258218364.png" alt=""
                             @click="deleteValue">
                        <img class="img2" src="img/871985992293283185.png" alt=""
                             @click="deleteValue">
                    </span>
        <span class="titleSearch right" @click="show($event)">
                    搜索
                </span>
    </div>

    <div class="searchList">
        <li class="valueList" v-for="(item,index) in selectValue">
            <div class="dataList left">
                <p class="listTitle" v-text="item.name"></p>
                <p class="xintuo">信托资金计划</p>
                <ul class="disFixed">
                    <li>收益<span v-text="item.commission"></span><span class="disFixed_unit">%</span>
                    </li>
                    <li>投资期限<span v-text="item.expectReturn"></span><span
                            class="disFixed_unit">个月</span></li>
                    <li>佣金<span v-text="item.investmentTerm"></span><span
                            class="disFixed_unit">%</span></li>
                </ul>
            </div>
            <div class="addImg right" @click="Con(item,index,$event)" data-state="0">
                <img src="img/page1.png" alt="">
            </div>
        </li>
    </div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function(){
    function reset(){
    window.onresize=r;
    function r(n){
    var innerWidth=window.innerWidth;
    document.querySelector('html').style.fontSize=0.15625*innerWidth+"px";
    if(innerWidth>window.screen.width&&n<=10){
    setTimeout(function(n){
    r(++n);
    },100)
    }else{
    document.querySelector('body').style.opacity=1;
    }
    }
    setTimeout(function(){
    r(0);
    },100)
    }
    reset();
    });
    var vm = new Vue({
    el:'#app',
    data:{
    valueList:4,
    onoff:true,
    id:'',
    indexNum:'',
    selectValue:'',
    inputValue:'',
    disPlay:"disPlay",
    userId:'',
    },
    methods:{
    deleteValue:function(){
    vm.selectValue = [];
    vm.inputValue = "";
    },
    show:function(event){
    var data = {
    "userId":vm.userId,
    "name":vm.inputValue,
    "total":"0",
    "count":"10"
    };
    $.ajax({
    url: "http://vip2.sosochudan.com/app/jxb/searchCompare",
    data: JSON.stringify(data),
    type: "POST",
    success:function(obj) {
    var obj = JSON.parse(obj);
    if(obj.data.result == '1'){
    vm.selectValue = obj.data.productList;
    }else{
    alert(obj.msg);
    }
    }
    });
    },
    Con:function(item,index,event){
      var test = $(event.currentTarget);
      var onoff = test.data("state");
      if(onoff == "1"){
        alert("请不要重复添加");
      }else{
        vm.proId +="," + item.id;
        var data = {
          "proId":vm.proId,
          "userId":vm.userId,
        };
        $.ajax({
              url: "http://vip2.sosochudan.com/app/jxb/setChooseProId",
              data: JSON.stringify(data),
              type: "POST",
              success:function(data) {
              var obj = JSON.parse(data);
                if(obj.data.result == "1"){
                  sessionStorage.setItem("arrayProId",vm.proId);
                  $('.addImg img')[index].src="img/page2.png";
                  $('.addCompare')[index].innerHTML = "已添加";
                  $('.addCompare')[index].style.color = "#c7c7c7";
                  test.data("state","1");
                }
              }
          });
      }
    },
  },
});
  function GetQueryString(name)
{
   var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if(r!=null)return  unescape(r[2]); return null;
}
//vue初始化自动执行函数
vm.$nextTick(function () {
   vm.userId = sessionStorage.getItem("userId");
  vm.proId = sessionStorage.getItem("arrayProId");
  vm.arrayTest = vm.proId.split(",");
})
























</script>
</html>
